//执行webpack给webpack设置参数的两种形式
//1. 直接给webpack命令后面跟参数
//  webpack 入口文件 -o 输出文件


//2. 在当前目录下创建webpack.config.js文件用来做配置

//直接执行webpack命令，webpack会自动在当前目录中找到webpack.config.js并使用里面的配置

//webpack本身是使用node.js编写  他的配置文件也是要用node.js来写的

//webpack的配置文件，一般不需要程序员手写，而是几乎用到所有的开发时工具都会自动生成配置文件

//不要求记住所有的配置项，通过本次课程了解配置文件中的大致内容，以后看到之后能够通过查阅资料等方式，解释清楚各个配置项即可


var path = require("path")
//需要使用node.js模块化方式将配置对象导出
module.exports = {
    //1. 入口文件的位置
    entry: path.join(__dirname, "src", "main.js"),
    //2. 输出文件的位置
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundle.js"
    },
    mode: "development",
    //module中可以配置加载器
    module: {
        rules:[
            //每个加载器的规则
            //对于哪种文件应该用哪个加载器处理
            {
                //这个正则表达式用来匹配文件名  以.css结尾的所有的文件
                test: /\.css$/,
                //在后面的先被使用  use中放的是加载器的名字
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(jpg)|(gif)|(png)|(svg)|(jpeg)$/,
                //url-loader会将图片转换成base-64的字符串保存到最终的js代码中
                //我们一般在使用url-loader的时候，都会设置一个阈值，超过这个大小的图片就不转base64
                //而是直接单独保存成一个文件
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 800
                    }
                }]
            },
            {
                test: /\.(ttf)|(woff)|(woff2)|(eot)$/,
                use: ["file-loader"]
            },
            {
                test: /\.js$/,
                //babel-loader加载器可以处理es6的代码
                //1. babel-loader需要依赖于转码规则对es6代码进行转换
                // 推荐大家使用的转码规则是 babel-preset-env
                // 如果有某些语法转换失败，我们可以去babel的官网进行尝试，找到合适的转码规则
                
                //2. babel-loader需要 .babelrc文件为其指定转码规则
                use: ["babel-loader"]
            }
        ]
    }
}